<template>
  <div class="invite-bg relative w-full h-screen invite-bg overflow-hidden">
    <div
      class="absolute bottom-8 inset-x-0 mx-4 p-4 bg-white rounded"
      v-if="isWx"
    >
      <weapp-btn :path="`/page/share/share?iid=${uid}`" />
    </div>

    <van-action-sheet :show="true" :closeable="false" v-else>
      <div class="py-6 px-4 space-y-4">
        <input
          class="rounded bg-red-100 border py-2 px-4 w-full"
          v-model="mobile"
          placeholder="请输入手机号"
        />
        <van-button type="danger" block @click="onSubmit"
          >立即注册下载</van-button
        >
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import wxShare from '../plugins/wxShare'
import weappBtn from '../components/weappBtn.vue'

export default {
  components: { weappBtn },
  inject: ['isWx'],
  data() {
    return {
      showDialog: true,
      show: false,
      mobile: '',
      qrcode: '',
      uid: '',
      title: '',
    }
  },
  async created() {
    // alert('is wx? ' + this.isWx)
    this.uid = this.$route.query.user_id
    let title = '邀请您加入喜花开'

    if (this.uid) {
      let resp = await this.axios.get(`/users/${this.uid}/baseinfo`)
      title = resp.data.result.nickname + title
      document.title = title
    }

    wxShare({
      title,
      imgUrl: new URL(`../assets/invite_bg.png`, import.meta.url),
      desc: title,
    })
  },
  methods: {
    onSubmit() {
      if (!/^1[34578]\d{9}$/.test(this.mobile)) {
        this.$toast.fail('手机号码有误')
        return false
      }
      this.axios
        .post(`invites`, {
          inviter_id: this.uid,
          mobile: this.mobile,
        })
        .then((res) => {
          let msg = res.data.msg
          if (res.data.status !== 1) {
            this.$toast.success(msg)
            return
          }
          this.$toast.fail(msg)
        })
    },
  },
}
</script>

<style>
.invite-bg {
  background-image: url('../assets/invite_bg.png');
  background-size: cover;
  background-repeat: no-repeat;
}
.invite-bg .van-overlay {
  background: none;
}
</style>
